<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>

<!-- webStorage:
1.存储内容大小一般支持5MB左右 (不同浏览器可能还不一样)
2.浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3.相关API:
    1. xxxxxStorage.setItem( ' key','value');
    该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
    2. xxxxxStorage.getItem( 'person');
    该方法接受一个键名作为参数，返回键名对应的值
    3. xxxxxStorage.removeItem( ' key');
    该方法接受一个键名作为参数，并把该键名从存储中删除.
    4.xxxxxStorage.clear()
    该方法会清空存储中的所有数据。
4.备注:
    1.SessionStorage存储的内容会随着浏览器窗口关闭而消失
    2.LocalStorage存储的内容，需要手动清除才会消失I
    3.xxxxxStorage.getItem(xxx) 如果xxx对应的value获取不到，那么getltem的返回值是null.
    4.JsoN.parse(nul1)的结果依然是null。 -->

<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点击保存数据</button>
    <button onclick="readData()">获取数据</button>
    <button onclick="delData()">删除数据</button>
    <button onclick="clearData()">清空数据</button>
</body>
<script type="text/javascript">
    function saveData(){
       localStorage.setItem("msg1","msg1");
       localStorage.setItem("msg2",666);

       let p = {name:'JJ',age:18}
       localStorage.setItem("person",JSON.stringify(p));

    }

    function readData(){
        let msg1 =  localStorage.getItem("msg1");
        let msg2 =  localStorage.getItem("msg2");
        let msg3 =  localStorage.getItem("person");
      
        console.log(msg1)
        console.log(msg2)
        console.log(JSON.parse(msg3))

        //key不存在 获取为null
        console.log(JSON.parse( localStorage.getItem("XX")))
    }

    function delData(){
        localStorage.removeItem("msg1")
    }

    function clearData(){
        localStorage.clear()
    }
</script>
</html>